@require './config'
@require './nprogress'
@require './code'
@require './custom-blocks'
@require './arrow'
@require './wrapper'
@require './toc'

html, body
  padding 0
  margin 0

body
  font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-size 16px
  color $textColor

.page
  padding-left $sidebarWidth

.navbar
  position fixed
  z-index 20
  top 0
  left 0
  right 0
  height $navbarAndBannerHeight
  background-color #fff
  box-sizing border-box
  border-bottom 1px solid $borderColor

.sidebar-mask
  position fixed
  z-index 9
  top 0
  left 0
  width 100vw
  height 100vh
  display none

.sidebar
  font-size 15px
  background-color #fff
  width $sidebarWidth
  position fixed
  z-index 10
  margin 0
  top $navbarAndBannerHeight
  left 0
  bottom 0
  box-sizing border-box
  border-right 1px solid $borderColor
  overflow-y auto

.theme-container:not(.custom) .content,
.theme-container:not(.custom) .content__default
  @extend $wrapper
  > *:first-child
    margin-top $navbarAndBannerHeight
  a:hover
    text-decoration underline
  p.demo
    padding 1rem 1.5rem
    border 1px solid #ddd
    border-radius 4px
  img
    max-width 100%

.content.custom
  padding 0
  margin 0
  img
    max-width 100%

a
  font-weight 500
  color $accentColor
  text-decoration none

p a code
  font-weight 400
  color $accentColor

kbd
  background #eee
  border solid 0.15rem #ddd
  border-bottom solid 0.25rem #ddd
  border-radius 0.15rem
  padding 0 0.15em

blockquote
  font-size 1.2rem
  color #999
  border-left .25rem solid #dfe2e5
  margin-left 0
  padding-left 1rem

ul, ol
  padding-left 1.2em

strong
  font-weight 600

h1, h2, h3, h4, h5, h6
  font-weight 600
  line-height 1.25
  .theme-container:not(.custom) .content > &,
  .theme-container:not(.custom) .content__default > &
    margin-top (0.5rem - $navbarAndBannerHeight)
    padding-top ($navbarAndBannerHeight + 1rem)
    margin-bottom 0
    &:first-child
      margin-top -1.5rem
      margin-bottom 1rem
      + p, + pre, + .custom-block
        margin-top 2rem
  &:hover .header-anchor
    opacity: 1

h1
  font-size 2.2rem

h2
  font-size 1.65rem
  padding-bottom .3rem
  border-bottom 1px solid $borderColor

h3
  font-size 1.35rem

a.header-anchor
  font-size 0.85em
  float left
  margin-left -0.87em
  padding-right 0.23em
  margin-top 0.125em
  opacity 0
  &:hover
    text-decoration none

code, kbd, .line-number
  font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace

p, ul, ol
  line-height 1.7

hr
  border 0
  border-top 1px solid $borderColor

table
  border-collapse collapse
  margin 1rem 0
  display: block
  overflow-x: auto

tr
  border-top 1px solid #dfe2e5
  &:nth-child(2n)
    background-color #f6f8fa

th, td
  border 1px solid #dfe2e5
  padding .6em 1em

.custom-layout
  padding-top $navbarAndBannerHeight

.theme-container
  &.sidebar-open
    .sidebar-mask
      display: block
  &.no-navbar
    .theme-container:not(.custom) .content > h1, h2, h3, h4, h5, h6,
    .theme-container:not(.custom) .content__default > h1, h2, h3, h4, h5, h6
      margin-top 1.5rem
      padding-top 0
    .sidebar
      top 0
    .custom-layout
      padding-top 0


@media (min-width: ($MQMobile + 1px))
  .theme-container.no-sidebar
    .sidebar
      display none
    .page
      padding-left 0

@require './mobile.styl'
@require './custom-style.styl'


// landing

.landing-html
  overflow-x hidden
  margin 0
  padding 0
  box-sizing border-box
  font-family: 'ChivoLight', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  color $black
  
  *
    margin 0
    padding 0
    box-sizing border-box
    font-family: 'ChivoLight', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    color $black
  
  body
    background $background-white
    font-size 15px
    overflow-x hidden
  
  .mb-hidden
    @media (max-width: 1001px)
      display none !important
  
  .mb-show
    @media screen and (min-width: 1000px)
      display none !important
  
  a
    text-decoration none
  
  .hidden
    pointer-events none
    position absolute !important
    left 100vw !important
  
  .padded-container
    max-width 960px
    padding 1rem 0
    margin 0 auto
    @media (max-width: 1000px)
      padding 1rem 20px
      max-width 513px
    @media (min-width: 1000px) and (max-width: 1040px)
      max-width 860px
  
  @import './config.styl'
  
  .custom-layout
    padding-top $LandingNavbarAndBannerHeight
  
  .navBarAndBannerSticky
    background #ffffff
    position: fixed
    z-index 100000
    top: 0
    width 100%
    height $LandingNavbarAndBannerHeight
  
  
  .sidebar-mask
    position fixed
    z-index 9
    top 0
    left 0
    width 100vw
    height 100vh
    display none
  
  .sidebar
    font-size 550
    font-size 15px
    background-color #fff
    width 20rem
    position fixed
    z-index 10
    margin 0
    top $bannerAndNavbarHeight
    left 0
    bottom 0
    box-sizing border-box
    border-right 1px solid $borderColor
    overflow-y auto

  h1, h2, h3, h4
    text-decoration none !important
    border: none !important

// Hide the external link icon from images
img + svg.icon.outbound {
  display: none !important;
}
